﻿<template>
    <el-card class="card" shadow="hover">
      <div class="label">{{ tableMessage.lable }}</div>
      <div class="card-body">
        <img :src="tableMessage.img" class="image" />
        <div class="message">
          <div class="title">
            <h3>{{ tableMessage.name }}</h3>
            <div class="abbr">
              {{ tableMessage.nameAbbr }}
            </div>
          </div>
          <p class="undermessage">{{ tableMessage.text }}</p>
        </div>
      </div>
    </el-card>
  </template>
    
  <script setup>
  import { defineProps } from "vue";
  
  // 接收传来的卡片信息
  const props = defineProps({
    tableMessage: { type: Object, required: true },
  });
  </script>
  
  <style scoped>
  .card {
    position: relative;
    width: auto;
    height: 100px;
    margin: 10px 10px 5px;
    cursor: pointer;
    background-color: white;
    border-radius: 20px;
  
    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 20%); */
    transition: all 0.2s;
  }
  
  .card:active {
    transform: scale(0.98);
  }
  
  .card-body {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }
  
  .label {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    padding: 2px 8px;
    font-size: 12px;
    color: #f26101;
    background: radial-gradient(circle at 10% 20%, #fffcd6 0%, #fdece0 90%);
    border-radius: 20px;
    border-bottom-left-radius: 6px;
  }
  
  .message {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 10px;
  }
  
  .title {
    display: flex;
    flex-direction: row;
    font-size: 16px;
  }
  
  .image {
    width: 62px;
    height: 62px;
    border-radius: 10px;
  }
  
  .abbr {
    height: 18px;
    padding: 3px;
    margin-left: 5px;
    font-size: 10px;
    color: rgb(156 163 175 / var(--un-text-opacity));
  
    --un-text-opacity: 1;
  }
  
  .undermessage {
    font-size: 12px;
  }
  </style>
  